<template>
  <el-container >
    <el-main style="padding: 30px;overflow: visible" v-my-loading="show" >
      <div style="overflow: visible; height: 100%" ref="container">
        <div class="article-container" v-for="(item, index) in articleList">
          <el-avatar class="avatar" :src="item.articleUserVo.avatar ? item.articleUserVo.avatar : 'static/img/tou.jpg'" />
          <div class="article-view-count">
            <div class="view-count">
              <span>{{item.viewCount}}</span>
            </div>
          </div>
          <span class="article-time">{{formatDateNotTime(getDateTimeStamp(item.createTime))}}</span>
          <span class="article-category">{{item.categoryName}}</span>
          <div class="article-image-thumb" @click="clickArticle(item)">
            <img style="height: 100% ; width: 100%" :src="item.thumbnail ? item.thumbnail : 'static/img/tou.png'" alt=""/>
          </div>
          <div class="article-desc">
            <el-row>
              <h1 class="article-title">{{item.title}}</h1>
            </el-row>
            <el-row>
              <p class="article-summary">{{item.summary}}</p>
            </el-row>
          </div>
          <div>
          </div>
        </div>
      </div>
    </el-main>
    <el-aside width="300px" style="padding: 20px 10px">
      <HotArticle @clickHotArticle="clickArticle"/>
    </el-aside>
  </el-container>

</template>

<script>
  import {getArticleList} from "../api/article/article";
  import HotArticle from "../components/HotArticle";
  export default {
    name: "Dynamics",
    components: {HotArticle},
    data() {
      return {
        articleList: [],
        total: 0,
        show: true,
        loadDisabled: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          categoryId: null,
          searchName: ''
        }
      }
    },
    created() {
      document.title = '社区动态'
      window.addEventListener('scroll', this.handleScroll);
      if(this.$route.query.categoryId !== '' && this.$route.query.categoryId !== null && this.$route.query.categoryId !== undefined) {
        this.queryParams.categoryId = this.$route.query.categoryId
      } else {
        this.queryParams.categoryId = null
      }
    },
    mounted() {
      this.getArticleList()
    },
    watch: {
      '$route':'routeChange'
    },
    methods: {
      getArticleList() {
        this.show = true
        getArticleList(this.queryParams).then((res) => {
          this.articleList = this.articleList.concat(res.rows)
          this.total = res.total
          this.show = false
          this.loadDisabled = this.articleList.length < this.total;
        }).catch(() => {
          this.show = false
        })
      },
      routeChange () {
        this.show = true
        this.queryParams.pageNum = 1
        if(this.$route.query.categoryId !== '' && this.$route.query.categoryId !== null && this.$route.query.categoryId !== undefined) {
          this.queryParams.categoryId = this.$route.query.categoryId
        } else {
          this.queryParams.categoryId = null
        }
        getArticleList(this.queryParams).then((res) => {
          this.articleList = res.rows
          this.total = res.total
          this.show = false
          this.loadDisabled = this.articleList.length < this.total;
        })
      },
      clickArticle(item) {
        this.$router.push({name: 'ArticleDetail', query: {aid: item.id}})
      },
      handleScroll() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight;
        if (scrollTop + clientHeight >= scrollHeight - 200 ) {
          this.loadMore()
        }
      },
      loadMore() {
        if(this.loadDisabled){
          this.loadDisabled = false
          this.queryParams.pageNum ++;
          this.getArticleList()
        }
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll) //页面离开后销毁监听事件
    }
  }
</script>

<style scoped>
  .article-summary {
    overflow: hidden;
    width: 90%;
    padding: 0 20px;
    height: 180px;
    line-height: 25px;
  }
  .article-title {
    font-size: 20px;
    line-height: 20px;
    font-weight: bolder;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    text-align: center;
    padding: 20px 20px;
    width: 90%;
  }
  .article-image-thumb {
    display: inline-block;
    margin: 20px 0 20px 5%;
    border-radius: 20px;
    width: 45%;
    height: 260px;
    overflow: hidden;
    cursor: pointer;
    vertical-align: baseline;
  }
  .article-desc {
    padding: 10px;
    display: inline-block;
    margin: 20px 0 20px 5%;
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
    border-radius: 20px;
    height: 260px;
    width: 40%;
    vertical-align: baseline;
    overflow: hidden;
  }
  .article-category {
    position: absolute;
    border-radius: 20px 2px 20px 2px;
    padding: 7px 11px 7px 11px;
    display: inline-block;
    color:#fff;
    font-size: 20px;
    line-height: 20px;
    top: 100px;
    left: -60px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
  }
  .article-time {
    font-size: 25px;
    line-height: 25px;
    position: absolute;
    border-radius: 2px 20px 2px 20px;
    padding: 7px 11px 7px 11px;
    display: inline-block;
    color:#fff;
    top: 55px;
    left: -60px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
  }
  .article-container {
    padding: 10px;
    min-height: 300px;
    position: relative;
    width: 90%;
    border-radius: 20px;
    font-size: 15px;
    box-shadow: 0 0 10px #b6b5b5;
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
    margin-bottom: 30px;
  }
  .view-count {
    padding-top: 10px;
    background-position: center;
    background-image: url("../../static/img/hot.png");
    background-size: 64px;
    background-repeat: no-repeat;
  }
  .article-view-count {
    text-align: center;
    line-height: 45px;
    font-size: 25px;
    color: #f43b47;
    position: absolute;
    top:-20px;
    right:-20px;
    height:60px;
    width:60px;
  }
  .avatar {
    position: absolute;
    top:-20px;
    left:-20px;
    height:60px;
    width:60px;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  }
  .avatar img {
    display: block;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
  }
</style>
